<template>
	<view class="RealNameAuthentication">
		<view class="RealNameAuthenticationHead">
			应监管要求，请上传证件
			<text style="float: right;font-size: 26rpx;font-weight: bold;">X</text>
		</view>
		<view class="RealNameAuthenticationOperation">
			<view class="RealNameAuthenticationOperationImg">
				<div class="RealNameAuthenticationOperationImgZM" style="position: relative;" @click="PhotoClick(1)">
					<text class="RealNameAuthenticationOperationImgText">拍摄行驶证首页</text>
					<image :src="positive" :style="positive != '' ? 'display:inline-block':'display:none;'" mode="" style="width: 100%;height: 100%;position: absolute;top: 0;"></image>
				</div>
				<div class="RealNameAuthenticationOperationImgGH" style="position: relative;" @click="PhotoClick(2)">
					<text class="RealNameAuthenticationOperationImgText">拍摄行驶证副页</text>
					<image :src="back" :style="back != '' ? 'display:inline-block':'display:none;'" mode="" style="width: 100%;height: 100%;position: absolute;top: 0;"></image>
				</div>
			</view>
		</view>
		<view style="background: #FFFFFF;">
			<view style="font-size: 30rpx;font-family: PingFang SC;font-weight: 500;color: #000000;text-align: center;">请核对您的车辆信息</view>
			<view style="padding: 0 50rpx;box-sizing: border-box;height: 110rpx;line-height: 110rpx;border-bottom: 1px solid #F8F8F8;">
				<view style="display: inline-block;width: 200rpx;font-size: 32rpx;">车牌号</view>
				<input disabled v-model="license"  style="width: 360rpx;display: inline-block;position: relative;top: 8rpx;" placeholder="车牌号" type="text">
			</view>
			<view style="padding: 0 50rpx;box-sizing: border-box;height: 110rpx;line-height: 110rpx;border-bottom: 1px solid #F8F8F8;">
				<view style="display: inline-block;width: 200rpx;font-size: 32rpx;">所有人</view>
				<input disabled v-model="AllPeople" style="width: 360rpx;display: inline-block;position: relative;top: 8rpx;" placeholder="车辆所有人姓名" type="text">
			</view>
			<view style="padding: 0 50rpx;box-sizing: border-box;height: 110rpx;line-height: 110rpx;border-bottom: 1px solid #F8F8F8;">
				<view style="display: inline-block;width: 200rpx;font-size: 32rpx;">车架号</view>
				<input disabled v-model="Frame" style="width: 360rpx;display: inline-block;position: relative;top: 8rpx;" placeholder="车架号" type="text">
			</view>
			<view style="padding: 0 50rpx;box-sizing: border-box;height: 110rpx;line-height: 110rpx;border-bottom: 1px solid #F8F8F8;">
				<view style="display: inline-block;width: 200rpx;font-size: 32rpx;">行驶里程</view>
				<input v-model="Mileage" style="width: 360rpx;display: inline-block;position: relative;top: 8rpx;" placeholder="请输入里程(公里)" type="text">
			</view>
			<view style="padding: 0 50rpx;box-sizing: border-box;height: 110rpx;line-height: 110rpx;border-bottom: 1px solid #F8F8F8;">
				<view style="display: inline-block;width: 200rpx;font-size: 32rpx;">注册日期</view>
				<input v-model="Registration" disabled style="width: 360rpx;display: inline-block;position: relative;top: 8rpx;" placeholder="请选择" type="text">
			</view>
			<view style="padding: 0 50rpx;box-sizing: border-box;height: 110rpx;line-height: 110rpx;border-bottom: 1px solid #F8F8F8;">
				<view style="display: inline-block;width: 200rpx;font-size: 32rpx;">车辆归属地</view>
				<input v-model="Vehicle" disabled style="width: 360rpx;display: inline-block;position: relative;top: 8rpx;" placeholder="请选择" type="text">
			</view>
		</view>
		<view class="RealNameAuthenticationBottom">
			<view class="RealNameAuthenticationBottomInput" @click="TiJiaoClick()">
				提交
			</view>
			<view>
				信息仅用做审批借款额度，将加密保障您的信息安全
			</view>
		</view>
		<view class="zzsccss" v-if="SFZZSC">
			<view style="margin: auto;width: 300rpx;height: 250rpx;background: rgba(0,0,0,0.8);border-radius: 10rpx;margin-top: 400rpx;">
				<image style="width: 150rpx;height: 150rpx;margin-left:75rpx;margin-top: 30rpx;;" src="../../static/zzsc.gif" mode=""></image>
				<view style="font-size: 25rpx;text-align: center;color: #FFF8F8;margin-top: 15rpx;">正在上传识别，请稍等</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {VUE_API_URL , VUE_API_URL_IMG} from "@/components/pulugins/index"
	export default {
		components: {
			
		},
		data() {
			return {
				token:'',
				positive:'',			//正面
				back:'',				//反面
				SFZZSC:false,
				xszxx:'',				//行驶证信息
				positiveInfo:'',		//行驶证正面信息
				license:'',				//车牌号
				AllPeople:'',			//所有人
				Frame:'',				//车架号
				Mileage:'',				//行驶里程
				Registration:'',		//注册日期
				Vehicle:'',				//车辆归属地
				positive2:'',
				back2:''
			}
		},
		onShow() {
			
		},
		mounted() {
			
		},
		methods: {
			PhotoClick(index){
				var that = this; 
				if(index == 1){
					uni.chooseImage({
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths[0];
							let image = new Image()     //新建一个img标签（不嵌入DOM节点，仅做canvas操作)
							image.src = tempFilePaths    //让该标签加载base64格式的原图
							image.onload = function() {    //图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的
								let canvas = document.createElement('canvas'), //创建一个canvas元素
								context = canvas.getContext('2d'),    //context相当于画笔，里面有各种可以进行绘图的API
								imageWidth = image.width / 2,    //压缩后图片的宽度，这里设置为缩小一半
								imageHeight = image.height / 2,    //压缩后图片的高度，这里设置为缩小一半
								data = ''    //存储压缩后的图片
								canvas.width = imageWidth    //设置绘图的宽度
								canvas.height = imageHeight    //设置绘图的高度
								
								//使用drawImage重新设置img标签中的图片大小，实现压缩。drawImage方法的参数可以自行查阅W3C
								context.drawImage(image, 0, 0, imageWidth, imageHeight)
								
								//使用toDataURL将canvas上的图片转换为base64格式
								data = canvas.toDataURL('image/jpeg')
							
								//将压缩后的图片显示到页面上的img标签
								console.log(data)
								that.SFZZSC = true;
								uni.uploadFile({
								    url: VUE_API_URL + 'uploadfile', //仅为示例，非真实的接口地址
								    filePath: data,
								    name: 'file',
								    formData: {
								        type:'positive'
								    },
									header: {
									    'Authori-zation': 'Bearer ' + uni.getStorageSync('token') //自定义请求头信息
									}, 
								    success: (res) => {
										that.SFZZSC = false;
										var json = eval('(' + res.data + ')');
										that.positive = VUE_API_URL_IMG + json.data.filename;
										console.log(that.positive);	
										that.positive2 = json.data.filename;
										
										that.license=json.data.info.plate_number;				//车牌号
										that.AllPeople=json.data.info.all;			//所有人
										that.Frame=json.data.info.vehicle_identification_number;				//车架号
										that.Registration=json.data.info.date_registration;		//注册日期
										that.Vehicle=json.data.info.address;				//车辆归属地
										
										var obj = new Object();
										obj.plate_number=json.data.info.plate_number;
										obj.all=json.data.info.all;
										obj.vehicle_identification_number=json.data.info.vehicle_identification_number;
										obj.date_registration=json.data.info.date_registration;
										obj.address=json.data.info.address;
										that.xszxx = obj;
										console.log(that.xszxx)
								    }
								});
							}
							//3.在canvas中把图片分辨率调低
							context.drawImage(image, 0, 0, imageWidth, imageHeight)
						}
					});
				}else{
					uni.chooseImage({
						success: (chooseImageRes) => {
							const tempFilePaths = chooseImageRes.tempFilePaths[0];
							let image = new Image()     //新建一个img标签（不嵌入DOM节点，仅做canvas操作)
							image.src = tempFilePaths    //让该标签加载base64格式的原图
							image.onload = function() {    //图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的
								let canvas = document.createElement('canvas'), //创建一个canvas元素
								context = canvas.getContext('2d'),    //context相当于画笔，里面有各种可以进行绘图的API
								imageWidth = image.width / 2,    //压缩后图片的宽度，这里设置为缩小一半
								imageHeight = image.height / 2,    //压缩后图片的高度，这里设置为缩小一半
								data = ''    //存储压缩后的图片
								canvas.width = imageWidth    //设置绘图的宽度
								canvas.height = imageHeight    //设置绘图的高度
								
								//使用drawImage重新设置img标签中的图片大小，实现压缩。drawImage方法的参数可以自行查阅W3C
								context.drawImage(image, 0, 0, imageWidth, imageHeight)
								
								//使用toDataURL将canvas上的图片转换为base64格式
								data = canvas.toDataURL('image/jpeg')

								//将压缩后的图片显示到页面上的img标签
								console.log(data)
								that.SFZZSC = true;
								uni.uploadFile({
									url: VUE_API_URL + 'uploadfile', //仅为示例，非真实的接口地址
									filePath: data,
									name: 'file',
									formData: {
										type:'room'
									},
									header: {
										'Authori-zation': 'Bearer ' + uni.getStorageSync('token') //自定义请求头信息
									}, 
									success: (res) => {
										that.SFZZSC = false;
										var json = eval('(' + res.data + ')');
										that.back = VUE_API_URL_IMG + json.data.filename;
										that.back2 = json.data.filename;
										console.log(that.back);
									}
								});
							}
							//3.在canvas中把图片分辨率调低
							context.drawImage(image, 0, 0, imageWidth, imageHeight)
						}
					});
				}
			},
			TiJiaoClick(){
				var that = this;
				that.xszxx.Mileage=that.Mileage;
				console.log(that.xszxx)
				uni.navigateTo({		//行驶证认证
					url: '../second/IncreaseInformation?xszxx=' + encodeURIComponent(JSON.stringify(that.xszxx)) + '&positive=' + that.positive2 + '&back=' + that.back2
				});
			}
		}
	}
</script>

<style>
	.zzsccss{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		/* background: rgba(0,0,0,0.5); */
	}
	.RealNameAuthenticationBottomInput{
		margin: auto;
		width: 650rpx;
		height: 95rpx;
		background: linear-gradient(-84deg, #DFBA94, #DFAE7C);
		box-shadow: 1px 3rpx 10rpx 0px rgba(0, 0, 0, 0.16);
		border-radius: 48rpx;
		text-align: center;
		line-height: 95rpx;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		margin-bottom: 20rpx;
	}
	.RealNameAuthenticationBottom{
		width: 100%;
		margin-top: 50rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #888888;
		text-align: center;
	}
	.RealNameAuthenticationTipsImg{
		display: inline-block;
		width: 25%;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #929292;
		text-align: center;
		margin-top: 48rpx;
	}
	.RealNameAuthenticationTips{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #4E4E4E;
		margin-top: 46rpx;
	}
	.RealNameAuthenticationOperationImgText{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #4E4E4E;
		position: absolute;
		bottom: 30rpx;
		left: 60rpx;
	}
	.RealNameAuthenticationOperationImgGH{
		background-image: url(../../static/sfzgh.png);
		background-size: 100%;
		width: 315rpx;
		height: 238rpx;
		position: relative;
		display: inline-block;
	}
	.RealNameAuthenticationOperationImgZM{
		background-image: url(../../static/sfzzm.png);
		background-size: 100%;
		width: 315rpx;
		height: 238rpx;
		position: relative;
		display: inline-block;
		margin-right: 38rpx;
	}
	.RealNameAuthenticationOperationImg{
		margin-top: 40rpx;
	}
	.RealNameAuthenticationOperationName{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #CCCCCC;
	}
	.RealNameAuthenticationOperation{
		background: #FFFFFF;
		width: 100%;
		padding: 35rpx 41rpx;
		box-sizing: border-box;
	}
	.RealNameAuthenticationHead{
		width: 100%;
		height: 50rpx;
		line-height: 50rpx;
		background: #FBE5CE;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #DFAF80;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	page{
		background: #F8F8F8;
	}
</style>
